<template>
  <pro-dialog ref="addExpDtModal" width="824" :nopadding="true" :title="curField?`编辑字段`:`新增字段`">
    <div class="modal-tpl" style="padding: 6px 24px 24px">
      <YsForm class="add-form" label-position="top" ref="addDtFrom" :rules="ruleValidate" :model="info" inline>
        <YsRow :gutter="16">
          <YsCol span="12">
            <YsFormItem label="字段" prop="field_id">
              <Select size="large" transfer clearable class="search-box select-border" v-model="info.field_id" placeholder="请选择字段">
                <Option v-for="(item, index) in fieldInfos" :value="item.id" @click.native="getNegativetem(item)" :key="index" :label="item.field_name"></Option>
              </Select>
            </YsFormItem>
          </YsCol>
          <YsCol span="12">
            <YsFormItem label="字段类型">
              <Select size="large" transfer class="search-box select-border search-zd" disabled v-model="info.field_type" placeholder="请选择字段类型">
                <Option v-for="(item, index) in fieldTypeList" :value="item.id" :key="index" :label="item.label"></Option>
              </Select>
            </YsFormItem>
          </YsCol>
        </YsRow>
        <YsRow :gutter="16">
          <YsCol span="12">
            <YsFormItem label="起始位（包含）" prop="exp_start">
              <YsInput type="number" class="num_input" size="large" :min="1" v-model="info.exp_start" placeholder="请选择起始位（包含）">
              </YsInput>
            </YsFormItem>
          </YsCol>
          <YsCol span="12">
            <YsFormItem label="末位（包含）" prop="exp_end">
              <YsInput type="number" class="num_input" size="large" :min="1" v-model="info.exp_end" placeholder="请选择末位（包含）">
              </YsInput>
            </YsFormItem>
          </YsCol>
        </YsRow>
        <YsRow class="foot-btn" style="margin-top: 4px">
          <YsButton size="large" @click="$refs.addExpDtModal.close()">取消</YsButton>
          <YsButton size="large" @click="submitTpClick('addDtFrom')" type="primary">确定</YsButton>
        </YsRow>
      </YsForm>
    </div>
  </pro-dialog>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: 'addExpDt',
  props: {
    expObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    var validateStart = (rule, value, callback) => {
      if (Number(this.info.exp_start) <= 0) {
        this.info.exp_start = null
        callback(new Error('起始位必须大于0'));
      } else if (this.info.exp_end) {
        this.$refs.addDtFrom.validateField('exp_end');
      }
      callback();
    };
    var validateEnd = (rule, value, callback) => {

      if (Number(this.info.exp_end) <= 0) {
        this.info.exp_end = null
        callback(new Error('末位必须大于0'));
      }
      if (this.info.exp_start) {
        if (Number(this.info.exp_start) < Number(value)) {
          callback();
        } else {
          callback(new Error('结束必须大于开始'));
        }
      } else {
        callback();
      }
    };

    return {
      fieldInfos: [],
      fieldTypeList: [
        { id: 1, label: "文本" },
        { id: 2, label: "数值" }
      ],
      curField: null,
      info: {
        exp_filter:'jt',
        exp_id: null,
        field_id: null,
        exp_start: null,
        exp_end: null,
        field_type: null
      },
      ruleValidate: {
        exp_id: [
          { required: true, message: '请选择字段', type: 'number', trigger: 'change' }
        ],
        exp_start: [
          { required: true, message: '请输入起始位', trigger: 'blur' },
          { validator: validateStart, trigger: 'blur' },
        ],
        exp_end: [
          { required: true, message: '请输入末位', trigger: 'blur' },
          { validator: validateEnd, trigger: 'blur' },
        ]
      },
    }
  },
  created() {
    this.getNegativeList()

  },
  methods: {
    ...mapActions(['addSpringExpDetailViewExpAPI', "editSpringExpDetailViewExpAPI", "getPageFieldAPI"]),

    // 获取字段列表
    getNegativeList() {
      this.getPageFieldAPI({ keyword: "",field_classes:[30] ,start_recd: 1, limit_recd: 999 }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.fieldInfos = data.fieldInfos || []
        } else {
          this.fieldInfos = this.$options.data().fieldInfos
        }
      })
    },
    //提交新增
    submitTpClick(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.curField) {
            this.exitCutFn()
          } else {
            this.addCutFn()
          }
        }
      })
    },
    // 新增
    addCutFn() {
      this.addSpringExpDetailViewExpAPI({ info: this.info }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.$YsMessage.success(data.message_text);
          this.$parent.getBeansList(true)
          this.$refs.addExpDtModal.close()
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch(err => {
        this.tableLoad = false
        this.$YsMessage.error('新增失败');
      })
    },
    // 编辑
    exitCutFn() {
      this.editSpringExpDetailViewExpAPI({ info: this.info }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.$YsMessage.success(data.message_text);
          this.$parent.getBeansList(true)
          this.$refs.addExpDtModal.close()
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch(err => {
        this.tableLoad = false
        this.$YsMessage.error('编辑失败');
      })
    },
    //打开弹出
    openFielModal(item) {
      this.$refs.addDtFrom.resetFields()
      if (item) {
        this.curField = item
        this.info.id = item.id
        this.info.field_id = item.field_id
        this.info.exp_start = item.exp_start
        this.info.exp_end = item.exp_end
        let curobj = this.fieldInfos.find(v => v.id === item.field_id)
        this.info.field_type = curobj.field_type
      } else {
        this.curField = null
        this.info = this.$options.data().info
        this.info.exp_id = this.expObj.id
      }
      this.$refs.addExpDtModal.show()
    },
    //设置选择内容
    getNegativetem(item) {
      this.info.field_type = item.field_type
      this.info.field_id = item.id
    }
  }
}
</script>

<style scoped lang='less'>
.modal-tpl {
  /deep/.ivu-form-item {
    width: 100%;
    margin-bottom: 24px;
    .num_input {
      width: 100%;
    }
    .ivu-input-word-count {
      top: initial;
      bottom: 10px;
    }
  }
  .foot-btn {
    /deep/ .ivu-btn {
      min-width: 96px !important;
    }
  }
}
</style>